<template>
  <div class="heighMap">
    <div class="head">
      <el-input v-model="search" placeholder="公司位置"></el-input>
      <el-button @click="getCityCode">搜索</el-button>
    </div>
    <div id="map"></div>
    <div class="foot">
      <el-button @click="close">取消</el-button>
      <el-button @click="handleClose" type='primary'>确认</el-button>
    </div>
  </div>
</template>

<script>
// var map = new AMap.Map('map', {
//     zoom: 11, //级别
//     center: [116.397428, 39.90923] //中心点坐标
// });
// var marker = new AMap.Marker({
//     position: new AMap.LngLat(116.39, 39.9), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
//     title: '北京',
//     draggable: true
// });

// // 将创建的点标记添加到已有的地图实例：
// marker.on('dragend', () => {
//     console.log(marker.getPosition());
// });
export default {
  name: '',
  data () {
    return {
      map: '',
      marker: '',
      newLng: '',
      newLat: '',
      search: ''
    };
  },
  props: ['address', 'lng', 'lat'],
  created () {
    this.search = this.address;
  },
  mounted () {
    if (this.lng && this.lat) {
      this.newLng = this.lng;
      this.newLat = this.lat;
      this.getMap();
    } else {
      this.getCityCode();
    }
  },
  watch: {
    'address': function (val) {
      this.search = val;
      this.getCityCode();
    }
  },
  methods: {
    close () {
      this.$emit('handleClose', false);
    },
    handleClose () {
      this.$emit('listenEvent', { lng: this.newLng, lat: this.newLat, });
      this.$emit('handleClose', false);
    },
    getMap () {
      this.map = new AMap.Map('map', {
        zoom: 11, //级别
        // c {Q: 27.828829644876265, R: 113.13277901649474, lng: 113.132779, lat: 27.82883}
        center: [this.newLng || 113.132779, this.newLat || 27.82883] //中心点坐标
      });

      this.marker = new AMap.Marker({
        position: new AMap.LngLat(this.newLng || 113.132779, this.newLat || 27.82883), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '',
        draggable: true
      });
      this.map.add(this.marker);
      // 将创建的点标记添加到已有的地图实例：
      this.marker.on('dragend', () => {
        console.log(this.marker.getPosition());
        this.newLng = this.marker.getPosition().lng;
        this.newLat = this.marker.getPosition().lat;
      });
    },
    getCityCode () {
      let that = this;
      AMap.plugin('AMap.Geocoder', function () {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: ''
        })
        console.log(that.search);
        if (that.search) {
          geocoder.getLocation(that.search, function (status, result) {
            console.log(status);

            if (status === 'complete' && result.info === 'OK') {
              // result中对应详细地理坐标信息
              console.log(result);
              that.newLng = result.geocodes[0].location.lng;
              that.newLat = result.geocodes[0].location.lat;
              that.getMap();
            }
          })
        } else {
          that.getMap();
        }
      })
    }
  }
};
</script>

<style scoped>
.heighMap {
    width: 96%;
    height: 470px;
    padding: 0 2%;
}
.head {
    display: flex;
    margin-bottom: 10px;
}
.head .el-input {
    margin-right: 20px;
}
#map {
    width: 100%;
    height: 330px;
    background: rgba(237, 237, 237, 1);
    opacity: 1;
}
.foot {
    margin-top: 10px;
    text-align: right;
}
.foot .el-button {
    width: 122px;
    height: 34px;
    opacity: 1;
    margin-left: 30px;
}
</style>